﻿<div [@routerTransition]>
    <h3 class="form-title">{{l("LogIn")}}</h3>

    <form #loginForm="ngForm" class="login-form" method="post" novalidate (ngSubmit)="login()">

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l("UserNameOrEmail")}}</label>
            <input [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control form-control-solid placeholder-no-fix input-ltr" type="text" autocomplete="off" placeholder="{{l('UserNameOrEmail')}}" name="userNameOrEmailAddress" required />
        </div>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">{{l('Password')}}</label>
            <input [(ngModel)]="loginService.authenticateModel.password" class="form-control form-control-solid placeholder-no-fix input-ltr" type="password" autocomplete="off" placeholder="{{l('Password')}}" name="password" required maxlength="32" />
        </div>

        <div class="form-group">
            <div class="mt-checkbox-list">
                <label class="mt-checkbox mt-checkbox-outline">
                    <input class="form-control" [(ngModel)]="loginService.rememberMe" type="checkbox" name="rememberMe" value="true" />{{l("RememberMe")}}
                    <span></span>
                </label>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-success uppercase" [disabled]="!loginForm.form.valid">{{l("LogIn")}}</button>
            <a routerLink="/account/forgot-password" id="forget-password" class="forget-password">{{l("ForgotPassword")}}</a>
        </div>
    </form>

    <div class="login-options" *ngIf="multiTenancySideIsTeanant && loginService.externalLoginProviders.length > 0">
        <h4>{{l("LoginWith")}}</h4>
        <ul class="social-icons">
            <li *ngFor="let provider of loginService.externalLoginProviders">
                <a class="social-login-icon social-icon-color {{provider.icon}}"
                   (click)="externalLogin(provider)"
                   title="{{provider.name}}"></a>
            </li>
        </ul>
    </div>

    <div class="create-account">
        <p>
            <span *ngIf="!multiTenancySideIsTeanant">
                <a routerLink="/account/select-edition" id="register-btn" class="uppercase">{{l("NewTenant")}}</a>
                <span class="pipe-divider"> | </span>
            </span>
            <span *ngIf="isSelfRegistrationAllowed">
                <a routerLink="/account/register" id="register-btn" class="uppercase">{{l("CreateAnAccount")}}</a>
                <span class="pipe-divider"> | </span>
            </span>
            <a routerLink="/account/email-activation" id="email-activation-btn" class="uppercase">{{l("EmailActivation")}}</a>
        </p>
    </div>
</div>